<template>
  <view>
    <u-navbar title="商品规格" :border="false" :statusBar="true" :fixed="true"></u-navbar>
    <view class="itemView">
      <view class="headView">
        <view class="itemTitle">
          <view class="add-btn" style="width: 175rpx; background-color: #67c23a" @click="onDialog"
            >增加规格名
          </view>
        </view>
        <view class="sku-name">
          <view
            v-for="(item, index) in skus"
            :key="index"
            @click="checkSkuName(index)"
            class="sku-name-item"
            :style="
              skusNameIndex != index
                ? 'background-color: #fff;color:black; border: 2rpx #999999 solid;'
                : ''
            "
          >
            {{ item.skuName }}
          </view>
        </view>
      </view>
      <view class="tabView">
        <view
          class="tabItemView"
          v-for="(item, index) in itemList"
          :key="index"
          @click="onItem(item, index)"
        >
          <!-- <view class="tabTitle3" v-if="index == itemList.length-1">+新建</view> -->
          <view class="tabTitle" v-if="index == tabIndex">
            <text>{{ item.name }}</text>
            <image class="tabIcon" src="/static/icon/check2.png" mode="aspectFit"></image>
          </view>
          <view class="tabTitle2" v-else>{{ item.name }}</view>
        </view>
      </view>
      <view class="skuTitle" v-if="sku_title">{{ sku_title }}</view>
      <view v-if="skus[skusNameIndex]" class="skuView">
        <view class="skuHeadView">
          <view class="skuTab">规格选项</view>
          <view class="skuTab" style="margin-left: 20rpx">价格(元)</view>
          <view class="skuTab" style="margin-left: 20rpx">库存</view>
        </view>
        <view class="" v-for="(item, index) in skus[skusNameIndex].skuItem" :key="index">
          <view class="" style="margin-left: 10rpx; display: flex">
            <text>商品规格:</text>
            <view class="" style="flex: 1">
              <input
                @click="onEditValue(item)"
                v-model="item.properties[0].valueName"
                style="width: 300rpx; margin-left: 10rpx; background-color: #efefef"
                type="text"
              />
            </view>
            <text @click="onRemove(index)" style="text-align: right; color: red; margin-left: 15rpx"
              >删除
            </text>
          </view>
          <view class="skuItemView">
            <u-upload
              max-count="1"
              :file-list="item.fileList"
              :action="action"
              @on-uploaded="uploaded($event, index)"
            ></u-upload>
            <view class="skup-ipt">
              <input
                class="skuInput"
                placeholder="销售价"
                placeholder-style="color:#999"
                v-model="item.price"
              />
              <!-- <input v-model="item.marketPrice" class="skuInput2" type="number" placeholder="市场价" placeholder-style="color:#999"  /> -->
              <!-- <input  v-model="item.costPrice"  class="skuInput2" type="number" placeholder="成本价" placeholder-style="color:#999"/> -->
              <!-- <input class="skuInput" placeholder="库存" placeholder-style="color:#999" v-model="item.stock" /> -->
              <!-- <input class="skuInput2" type="number" placeholder="重量kg" placeholder-style="color:#999" v-model="item.weight" /> -->
              <!-- <input class="skuInput2" type="number" placeholder="体积m³" placeholder-style="color:#999" v-model="item.volume" /> -->
              <image
                class="reduceIcon"
                src="/static/icon/reduce2.png"
                mode="aspectFit"
                @click="onSplice(index)"
              >
              </image>
            </view>
          </view>
        </view>
        <view style="display: inline-block" class="addSkuView" @click="onAddSku()"
          >+添加商品规格
        </view>
      </view>
      <view class="H100"></view>
    </view>
    <view style="height: 120rpx"></view>
    <view class="bottomView">
      <view class="bottomBtn" @click="onSaveSku()">确认</view>
    </view>
    <u-popup mode="center" width="550" height="355" v-model="show">
      <view class="popup-box">
        <view class="popup-title"> 添加规格</view>
        <view class="" style="display: flex; justify-content: space-between">
          <view
            class=""
            @click="skusName = '重量'"
            style="
              border-radius: 8rpx;
              width: 100rpx;
              height: 50rpx;
              text-align: center;
              line-height: 50rpx;
              background-color: #e9e9e9;
              color: #999;
            "
          >
            重量
          </view>
          <view
            class=""
            @click="skusName = '尺寸'"
            style="
              border-radius: 8rpx;
              width: 100rpx;
              height: 50rpx;
              text-align: center;
              line-height: 50rpx;
              background-color: #e9e9e9;
              color: #999;
            "
          >
            尺寸
          </view>
          <view
            class=""
            @click="skusName = '平方'"
            style="
              border-radius: 8rpx;
              width: 100rpx;
              height: 50rpx;
              text-align: center;
              line-height: 50rpx;
              background-color: #e9e9e9;
              color: #999;
            "
          >
            平方
          </view>
          <view
            class=""
            @click="skusName = '数量'"
            style="
              border-radius: 8rpx;
              width: 100rpx;
              height: 50rpx;
              text-align: center;
              line-height: 50rpx;
              background-color: #e9e9e9;
              color: #999;
            "
          >
            数量
          </view>
        </view>
        <input v-model="skusName" class="inp" placeholder="请输入规格名" type="text" />
        <!-- <input v-model="form.sort" class="inp" placeholder="请输入分类名称" type="text"> -->
        <view @click="addSkuName" class="popup-btn"> 保存</view>
      </view>
    </u-popup>

    <u-popup mode="center" width="550" height="355" v-model="showValue">
      <view class="popup-box">
        <view class="popup-title">
          {{ showValue ? '更新商品规则' : '添加商品规格' }}
        </view>
        <input
          v-model="skusValue"
          class="inp"
          placeholder-style="font-size:26rpx;"
          placeholder="商品规格(例如:10公斤, 5平方, 50X50cm等)"
          type="text"
        />
        <!-- <input v-model="form.sort" class="inp" placeholder="请输入分类名称" type="text"> -->
        <view @click="addSkuValue" class="popup-btn"> 保存</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { BASE_URL, UP_URL } from '@/common/config.js'

export default {
  data() {
    return {
      showValue: false,
      show: false,
      action: BASE_URL + UP_URL,
      skusName: '',
      skusNameIndex: '',
      skus: [],
      arr: [],
      tabIndex: -1,
      spec_id: '',
      sku_title: '',
      itemList: [],
      skusValue: '',
      skuList: [
        {
          spec_name: '',
          price: '',
          stock: 9999
        }
      ],
      defaultSpe: true,
      skuStatus: 1,
      checkItem: ''
    }
  },
  onLoad(res) {
    if (res.sku) {
      let sku = JSON.parse(res.sku)
      this.defaultSpe = false
      for (let i = 0; i < sku.length; i++) {
        sku[i].fileList = [{ url: sku[i].picUrl }]

        if (this.skus.length > 0) {
          for (let j = 0; j < this.skus.length; j++) {
            if (sku[i].properties[0].propertyName == this.skus[j].skuName) {
              this.skus[j].skuItem.push(sku[i])
              break
            }

            if (j == this.skus.length - 1) {
              this.skus.push({
                id: sku[i].properties[0].propertyId,
                skuName: sku[i].properties[0].propertyName,
                skuItem: [sku[i]]
              })
            }
          }
        } else {
          this.skus.push({
            id: sku[i].properties[0].propertyId,
            skuName: sku[i].properties[0].propertyName,
            skuItem: [sku[i]]
          })
        }
      }
    }
  },
  methods: {
    onClose() {
      uni.navigateBack({
        delta: 1
      })
    },

    checkSkuName(i) {
      this.skusNameIndex = i
    },
    onItem(item, index) {
      this.spec_id = item.id
      this.sku_title = item.name
      this.tabIndex = index
    },
    addSkuName() {
      if (!this.skusName) {
        this.$u.toast('规格名不能为空')
        return
      }

      this.$u.post('/app-api/product/property/create', { name: this.skusName }).then((res) => {
        this.skus.push({
          skuName: this.skusName,
          id: res.data,
          skuItem: []
        })

        this.skusNameIndex = this.skus.length - 1
      })
      this.show = false
    },
    addSkuValue() {
      if (this.skuStatus) {
        this.$u
          .post('/app-api/product/property/value/create', {
            propertyId: this.skus[this.skusNameIndex].id,
            name: this.skusValue
          })
          .then((res) => {
            this.skus[this.skusNameIndex].skuItem.push({
              propertyId: this.skus[this.skusNameIndex].id,
              name: this.skusValue,
              price: '',
              marketPrice: '',
              costPrice: '',
              barCode: '',
              picUrl: '',
              stock: 9999,
              weight: '',
              volume: '',
              firstBrokeragePrice: '',
              secondBrokeragePrice: '',
              properties: [
                {
                  propertyId: this.skus[this.skusNameIndex].id,
                  propertyName: this.skus[this.skusNameIndex].skuName,
                  valueId: res.data,
                  valueName: this.skusValue
                }
              ]
            })
          })

        return
      }

      console.log(this.checkItem)
      this.$u
        .put('/app-api/product/property/value/update', {
          propertyId: this.skus[this.skusNameIndex].id,
          id: this.checkItem.properties[0].valueId,
          name: this.skusValue
        })
        .then((res) => {
          this.checkItem.properties[0].valueName = this.skusValue
        })
      this.showValue = false
    },
    onEditValue(item) {
      //this.$u.put()
      this.checkItem = item
      this.skuStatus = 0
      this.skusValue = item.properties[0].valueName
      this.showValue = true
    },
    onAddSku(item) {
      this.skuStatus = 1
      this.skusValue = ''
      this.showValue = true
    },
    onDialog() {
      // if(this.skus.length < 1){

      // }
      // this.$u.toast("规则名暂只能添加一个！")
      this.skusName = ''
      this.show = true
      return
    },
    onSplice(index) {
      this.skuList.splice(index, 1)
    },
    uploaded(e, i) {
      this.skus[this.skusNameIndex].skuItem[i].picUrl = e[0].response.data
    },
    onRemove(e) {
      this.skus[this.skusNameIndex].skuItem.splice(e, 1)
    },
    onSaveSku() {
      let skus = []
      console.log(this.skus)
      for (let item2 of this.skus) {
        for (let item of item2.skuItem) {
          if (!item.properties[0].valueName) {
            this.$u.toast('商品规格不能为空')
            return
          }
          if (!item.price) {
            this.$u.toast('价格不能为空')
            return
          }
          // if(!item.marketPrice){
          // 	this.$u.toast("市场价格不能为空")
          // 	return
          // }
          // if(!item.costPrice){
          // 	this.$u.toast("成本价不能为空")
          // 	return
          // }
          if (!item.picUrl) {
            this.$u.toast('图片不能为空')
            return
          }
          // if(!item.weight){
          // 	this.$u.toast("重量不能为空")
          // 	return
          // }
          // if(!item.volume){
          // 	this.$u.toast("体积不能为空")
          // 	return
          // }
          skus.push(item)
        }
      }
      uni.$emit('sku', skus)
      uni.navigateBack()
    }
  }
}
</script>

<style>
page {
  background: #f5f5f5;
}

.sku-name {
  display: flex;
  flex-wrap: wrap;
  align-self: flex-start;
}

.sku-name-item {
  background-color: #0f76bc;
  color: #fff;
  padding: 9rpx 15rpx;
  border-radius: 8rpx;
  margin: 10rpx;
}

.itemView {
  display: flex;
  flex-direction: column;
  background: #fff;
  margin: 30rpx;
}

.headView {
  display: flex;
  flex-direction: column;
  margin: 0px 20rpx;
  padding: 30rpx 0px;
  border-bottom: 1px solid #f5f5f5;
}

.itemTitle {
  font-size: 30rpx;
  font-weight: 400;
  color: #333333;
}

.itemText {
  font-size: 26rpx;
  font-weight: 400;
  color: #999999;
  margin-top: 10rpx;
}

.tabView {
  display: flex;
  flex-wrap: wrap;
  padding: 30rpx 20rpx;
}

.tabItemView {
  display: flex;
  flex-direction: column;
}

.tabTitle {
  width: 176rpx;
  height: 58rpx;
  line-height: 58rpx;
  background: #e6f5f1;
  text-align: center;
  border: 1rpx solid #0f76bc;
  border-radius: 10rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #0f76bc;
  margin-right: 30rpx;
  margin-bottom: 20rpx;
  position: relative;
  overflow: hidden;
}

.tabTitle2 {
  width: 180rpx;
  height: 60rpx;
  line-height: 60rpx;
  background: #f5f5f5;
  text-align: center;
  border-radius: 15rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
  margin-right: 30rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.tabIcon {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  right: -1px;
  bottom: -1px;
}

.tabTitle3 {
  width: 176rpx;
  height: 58rpx;
  line-height: 58rpx;
  text-align: center;
  background: #ffffff;
  border: 1rpx solid #d1d1d1;
  border-radius: 10rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
}

.skuTitle {
  font-size: 30rpx;
  font-weight: 400;
  color: #333333;
  margin: 0px 20rpx;
  padding: 30rpx 0px;
  border-top: 1px solid #f5f5f5;
  border-bottom: 1px solid #f5f5f5;
}

.skuView {
  display: flex;
  flex-direction: column;
  padding: 0px 20rpx;
}

.skuHeadView {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 30rpx 0rpx;
}

.skuTab {
  width: 29%;
  font-size: 26rpx;
  font-weight: 400;
  color: #333333;
}

.skuItemView {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 30rpx;
}

.skup-ipt {
  display: flex;
  flex-wrap: wrap;
}

.skuInput {
  width: 200rpx;
  height: 60rpx;
  background: #f5f5f5;
  border: 1px solid #f5f5f5;
  border-radius: 10rpx;
  font-size: 26rpx;
  font-weight: 400;
  color: #333;
  padding-left: 10rpx;
  padding-right: 10rpx;
  margin-bottom: 20rpx;
}

.skuInput2 {
  width: calc(28% - 20rpx);
  height: 60rpx;
  background: #f5f5f5;
  border: 1px solid #f5f5f5;
  border-radius: 10rpx;
  margin-left: 20rpx;
  font-size: 26rpx;
  font-weight: 400;
  color: #333;
  padding-left: 10rpx;
  padding-right: 10rpx;
}

.reduceIcon {
  width: 32rpx;
  height: 32rpx;
  margin-left: 15rpx;
}

.addSkuView {
  width: 180rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  background: #ffffff;
  border: 1px solid #0f76bc;
  border-radius: 10rpx;
  font-size: 26rpx;
  font-weight: 400;
  color: #0f76bc;
}

.bottomView {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  position: fixed;
  bottom: 0px;
  height: 100rpx;
  background: #fff;
  box-shadow: 0px -1px 10px 0px rgba(153, 153, 153, 0.1);
}

.bottomBtn {
  width: calc(100% - 60rpx);
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  background: #0f76bc;
  border-radius: 35rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #ffffff;
}

.add-btn {
  background-color: #0f76bc;
  color: #fff;
  padding: 9rpx 15rpx;
  border-radius: 8rpx;
}

.popup-box {
  font-size: 30rpx;
  padding: 20rpx;
}

.popup-title {
  text-align: center;
  padding: 20rpx 0;
}

.inp {
  background-color: #f7f7f7;
  height: 55rpx;
  margin-top: 20rpx;
}

.popup-btn {
  width: 500;
  padding: 18rpx;
  background-color: #0f76bc;
  text-align: center;
  color: #fff;
  margin-top: 58rpx;
  border-radius: 8rpx;
}
</style>
